<template>
  <div class="message-manage-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="search-container">
        <div class="search-item">
          <div class="content">
            <el-input
              v-model="condition"
              placeholder="输入关键字搜索"
              @blur="handleSearch"
              @keydown.native.enter="handleSearch">
            </el-input>
          </div>
          <div class="label">类型：</div>
          <div class="content">
            <el-select v-model="msgType">
              <el-option
                v-for="key in Object.keys(msgTypes)"
                :label="msgTypes[key]"
                :value="key"
                :key="key">
                {{ msgTypes[key] }}
              </el-option>
            </el-select>
          </div>
          <div class="label">状态：</div>
          <div class="content">
            <el-select v-model="dealStatus">
              <el-option label="未处理" value="0">未处理</el-option>
              <el-option label="已处理" value="1">已处理</el-option>
            </el-select>
          </div>
          <el-button class="search-btn" type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary" @click="handleRefresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
      </div>
      <el-table
        class="table-container"
        :data="tableData"
        v-loading="tableLoading"
        element-loading-custom-class="custom-load"
        row-key="id">
        <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
        <el-table-column label="消息名称" prop="msgName" align="center"></el-table-column>
        <el-table-column label="消息类型" prop="msgType" align="center">
          <template slot-scope="scope">
            {{ msgTypes[scope.row.msgType] || '' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dealStatus === '0' ? '未处理' : '已处理' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createUserName" align="center"></el-table-column>
        <el-table-column label="抄送人" prop="copyUserName" align="center"></el-table-column>
        <el-table-column label="更新时间" prop="modifyTime" align="center"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <span style="display: none;"></span>
            <span
              v-if="hasTableDetail && !hasRead"
              class="btn"
              @click="handleView(scope.row)">已处理</span>
            <!--            <span-->
            <!--              v-if="scope.row.hasDelete"-->
            <!--              class="btn"-->
            <!--              @click="handleDelete(scope.row)">删除</span>-->
          </template>
        </el-table-column>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </main>
  </div>
</template>

<script>
  import Breadcrumb from '@/components/public/Breadcrumb';

  export default {
    data() {
      return {
        breadcrumbData: [
          { name: '消息管理' }
        ],
        // 消息类型 1：材料管理 2:质安管理
        msgType: '1',
        // 0：未处理；1：已处理
        dealStatus: '0',
        // 关键字
        condition: '',
        // 列表数据
        tableData: [],
        tableLoading: false,
        total: 0,
        pageSize: 10,
        pageNo: 1,
        hasSearch: false,
        msgTypes: {
          '1': '材料管理',
          '2': '质安管理'
        },
      };
    },
    computed: {
      projectId() {
        return this.$store.state.currentProjectId;
      },
      userInfo() {
        return this.$store.state.userInfo;
      }
    },
    watch: {
      msgType() {
        this.clear();
        this.getTableData();
      },
      dealStatus() {
        this.clear();
        this.getTableData();
      }
    },
    created() {
      this.getTableData();
    },
    components: {
      Breadcrumb,
    },
    methods: {
      /**
       * 获取列表数据
       */
      async getTableData() {
        const params = {
          pageNum: this.pageNo,
          pageSize: this.pageSize,
          dealUser: this.userInfo.uuid,
          msgType: this.msgType,
          dealStatus: this.dealStatus,
        };
        if (this.hasSearch) {
          params.condition = this.condition;
        }
        this.tableLoading = true;
        const { success, data: {
          data
        }} = await this.$Model.getAgencyMsgList(params);
        this.tableLoading = false;
        if (success && data) {
          const list = data.list || [];
          this.tableData = list.map(item => {
            const { dealStatus } = item;
            return {
              ...item,
              hasRead: dealStatus === '1'
            };
          });
          this.total = data.total || 0;
        }
      },
      /**
       * pageSize 改变时会触发
       * @param pageSize 每页条数
       */
      handleSizeChange(pageSize) {
        this.pageNo = 1;
        this.pageSize = pageSize;
        this.getTableData();
      },
      /**
       * currentPage 改变时会触发
       * @param pageNo 当前页
       */
      handleCurrentChange(pageNo) {
        this.pageNo = pageNo;
        this.getTableData();
      },
      // 清除参数
      clear() {
        this.pageNo = 1;
        this.pageSize = 10;
        this.total = 0;
        this.tableLoading = false;
        this.tableData = [];
      },
      // 搜索
      handleSearch() {
        this.clear();
        this.hasSearch = !!this.condition;
        this.getTableData();
      },
      handleRefresh() {
        this.condition = '';
        this.searchDate = '';
        this.msgType = '1';
        this.dealStatus = '0';
        this.clear();
        this.getTableData();
      },
      // 已读
      async handleView(row) {
        const { success } = await this.$Model.messageRead({
          ids: row.id
        });
        success && this.getTableData();
      },
      // 删除
      handleDelete(row) {
        // this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        //   type: 'warning'
        // }).then(async () => {
        //   const { success } = await this.$Model.delStockInMaterial({
        //     ids: row.id
        //   });
        //   if (success) {
        //     this.$message.success('删除成功');
        //     this.clear();
        //     this.getTableData();
        //   }
        // });
      },
    }
  };
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .message-manage-page {
    width: 100%;
    height: 100%;
    background-color: $mainBg;
    overflow: hidden;
    main {
      width: 100%;
      height: calc(100% - 50px);
      padding: 20px;
      .search-container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .search-item {
          display: flex;
          align-items: center;
          .el-input {
            width: 300px;
            margin-right: 20px;
          }
        }
        .search-btn {
          margin-left: 20px;
        }
      }
      .table-container {
        height: calc(100% - 120px);
        /deep/ .el-table__body-wrapper {
          height: calc(100% - 50px);
          padding-bottom: 46px;
          overflow-y: auto;
          .btn {
            padding: 0 5px;
            cursor: pointer;
            color: $mainColor;
          }
          .img {
            width: 60px;
            height: 60px;
          }
          .file-name {
            height: 60px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }
        }
        /deep/ .el-table__header {
          th.is-leaf .el-button span {
            color: #fff;
          }
        }
      }

    }
  }
</style>
